<template>
  <t-form
    ref="form"
    class="base-form"
    :data="formData"
    :rules="FORM_RULES"
    label-align="left"
    :label-width="90"
    @submit="onSubmit"
  >
    <div class="form-basic-container">
      <div class="form-basic-item">
        <!-- <div class="form-basic-container-title">表单信息</div> -->
        <!-- 表单内容 -->
        <t-form-item label="支付宝交易号" name="tradeNo">
          <t-input v-model="formData.tradeNo" :style="{ width: '322px' }" placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="订单号" name="orderNo">
          <t-input v-model="formData.orderNo" :style="{ width: '322px' }" placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="">
          <t-space>
            <t-button theme="primary" class="form-submit-confirm" type="submit" :disabled="sending">
              发送请求
            </t-button>
          </t-space>
        </t-form-item>
      </div>
    </div>
  </t-form>

  <response :data="resData"></response>
</template>

<script lang="ts">
export default {
  name: 'AlipayTradeQuery',
};
</script>

<script setup lang="ts">
import { ref, reactive, defineProps } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

import Response from './Response.vue';
import { TRADE_QUERY_PARAMS } from '../constants';
import { AlipayTradeQuery } from '@/api/test';

const props = defineProps({
  scene: {
    type: String,
  },
});
const formData = ref({ ...TRADE_QUERY_PARAMS });
const FORM_RULES = {
  orderNo: [{ required: false, message: '请输入必要信息', type: 'error' }],
  tradeNo: [{ required: false, message: '请输入必要信息', type: 'error' }],
};

const resData = reactive({
  request: {
    data: '',
    url: '',
  },
  response: {
    data: '',
  },
});

const sending = ref(false);
const query = () => {
  if (formData.value.orderNo === '' && formData.value.tradeNo === '') {
    MessagePlugin.error('支付宝交易号，订单号至少要有一个不为空');
  }
  resData.request.url = 'api/alipay/trade/query'; //  resData.request.data = JSON.stringify(formData.value);
  sending.value = true;
  // 发起支付
  AlipayTradeQuery(formData.value.orderNo, formData.value.tradeNo)
    .then((ret) => {
      console.log('ret', JSON.stringify(ret));
      resData.response.data = JSON.stringify(ret);
    })
    .catch((e) => {
      resData.response.data = e.message;
      MessagePlugin.error(e.message);
    })
    .finally(() => {
      sending.value = false;
    });
};
const onSubmit = ({ validateResult }) => {
  if (validateResult === true) {
    query();
  }
};
</script>

<style lang="less" scoped></style>
